<template>
    <div style="width:100%;height:100%;background:white;" >
        <ul>
            <li class="wrap">
                <div class="personal flex_wrap">
                    <div class="useinfo" style="width:auto;">
                        <div class="usename">反馈类型:{{formatterType(item.backType)}}</div>
                        <p class="dianping" >{{item.backMessage}}</p>
                    </div>
                </div>
                <div class="img_wrap" >
                    <img v-for='(img,index) in item.filePathList' @click.stop="$api.showImgDetail(img.filePath)" v-if="img.fileType==1" :src=$api.formatterImg(img.filePath) />
                </div>
                <div class="audio_wrap">
                    <audio v-for='(audio,index) in item.filePathList' v-if="audio.fileType==2"  :src=audio.filePath ></audio>
                </div>
                <div class="time">{{$formatter.date(item.createTime)}}</div>
            </li>
        </ul>
    </div>

</template>
<script>
    import {
        MessageBox
    } from 'mint-ui'
    export default {
        name: "footShow",
        data() {
            return {
                useInfo: {},
                item: {},
            };
        },
        methods: {
            getItem() {
                this.item = JSON.parse(sessionStorage.getItem('feedDetail'));
                if (!this.item.filePath) return;
                var filePathList = this.item.filePath.split(',').map(o => {
                    let obj = {
                        fileType: 1,
                        filePath: o,
                    }
                    return obj;
                })
                filePathList = filePathList.filter(o => {
                    return o.filePath;
                })
                this.item.filePathList = filePathList;
            },
            formatterType(id) {
                switch (id) {
                    case 1:
                        return "使用异常";
                        break;
                    case 2:
                        return "意见反馈";
                        break;
                    default:
                        return "其他";
                        break;
                }
            },
        },
        created() {
            this.getItem();
        }
    }
</script>
<style scoped>
    .wrap {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 100%;
        text-align: left;
        padding: 0.2rem;
        padding-left: 0.4rem;
        font-size: 0.3rem;
        background: white;
        margin-bottom: 0.2rem;
    }
    
    .text {
        font-size: 0.4rem;
        width: 100%;
        color: #161616;
        margin-bottom: 0.18rem;
    }
    
    .time {
        width: auto;
        height: 0.55rem;
        font-size: 0.3rem;
        color: #a6a6a6;
    }
    
    .delete {
        color: #0489ff;
        margin-left: 0.25rem;
    }
    
    .audio_wrap {
        width: 100%;
        height: auto;
    }
    
    .audio_wrap audio {
        width: 7rem;
    }
    
    .dongtai_action {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
        font-size: 0.4rem;
        color: #5e5e5e;
        border-top: 1px solid #ebebeb;
    }
    
    .dongtai_action i {
        margin-top: 0.14rem;
        margin-right: 0.2rem;
    }
    
    .zan {
        display: flex;
        width: 2.2rem;
        height: 100%;
        justify-content: center;
    }
    
    .zan.active div {
        color: #0489ff;
    }
    
    .zan.active i {
        background-image: url('../../static/images/dongtai/3@2x.png');
    }
    
    .zan i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/5@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .pinglun {
        width: 4rem;
        display: flex;
        height: 100%;
        justify-content: center;
    }
    
    .pinglun i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/4@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .share {
        width: 3rem;
        display: flex;
        height: 100%;
        justify-content: center;
    }
    
    .share i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/1@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .dongtai_zan {
        display: none;
        border-top: 1px solid #ebebeb;
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
    }
    
    .dongtai_zan.active {
        display: flex;
    }
    
    .dongtai_zan i {
        display: block;
        width: 0.45rem;
        height: 0.45rem;
        margin-top: 0.18rem;
        margin-right: 0.2rem;
        background-image: url('../../static/images/dongtai/7@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .dongtai_zan .name {
        margin-left: 0.1rem;
    }
    
    .pinglun_list_wrap {
        border-top: 1px solid #ebebeb;
        width: 100%;
    }
    
    .huifu_wrap {
        padding-left: 0.6rem;
    }
    
    .pinglun_list li>div {
        color: #808080;
        display: flex;
        height: 0.7rem;
        line-height: 0.7rem;
        padding-right: 0.2rem;
        justify-content: space-between;
    }
    
    .pinglun_list .delete {
        color: #9f9f9f;
    }
</style>